<template>
    <div class="mu-input" :class="{'mu-input-disabled': disabled}">
        <div class="mu-input-icon" v-if="iconPosition === 'left'">
            <slot name="icon">
                <i class="mu-input-i ion" :class="iconClass" :style="iconWidth && {width: iconWidth}"></i>
            </slot>
        </div>
        <div class="mu-input-label">
            <slot name="label">
                <span :class="labelClass">{{label}}</span>
            </slot>
        </div>
        <div class="mu-input-box">
            <input v-if="type === 'text'" ref="but" type="text" v-model="current_value" class="mu-input-inner" :placeholder="placeholder"
                :disabled="disabled">
            <input v-if="type === 'number'" ref="but" type="number" v-model="current_value" class="mu-input-inner" :placeholder="placeholder"
                :disabled="disabled">
            <input v-if="type === 'tel'" ref="but" type="tel" v-model="current_value" class="mu-input-inner" :placeholder="placeholder"
                :disabled="disabled">
            <input v-if="type === 'password'" ref="but" type="password" v-model="current_value" class="mu-input-inner" :placeholder="placeholder"
                :disabled="disabled">
            <input v-if="type === 'email'" ref="but" type="email" v-model="current_value" class="mu-input-inner" :placeholder="placeholder"
                :disabled="disabled">
            <input v-if="type === 'search'" ref="but" type="search" v-model="current_value" class="mu-input-inner" :placeholder="placeholder"
                :disabled="disabled">
        </div>
        <div class="mu-input-icon" v-if="iconPosition === 'right'" @click="$emit('onIconClick')">
            <slot name="icon">
                <i class="mu-input-i" :class="iconClass" :style="{width: iconWidth}"></i>
            </slot>
        </div>
        <slot></slot>
    </div>
</template>

<script>
    import mixins from '../../../mixins'
    export default {
        name: 'mu-input',
        data: function () {
            return {
                current_value: '',
                current_placeholder: ''
            }
        },
        mixins: [mixins],
        created: function () {
            if (!this.iconWidth) return
            this.iconWidth = isNaN(Number(this.iconWidth)) ? this.iconWidth : this.iconWidth + 'px'
        },
        props: {
            value: [String, Number],
            'icon-width': {
                default: 0
            },
            'icon-class': {
                type: [String, Array, Object],
                default: ''
            },
            label: {
                default: ''
            },
            'label-class': {
                type: [String, Array, Object],
                default: ''
            },
            type: {
                type: String,
                default: 'text'
            },
            placeholder: {
                type: String,
                default: ''
            },
            disabled: {
                type: Boolean,
                default: false
            },
            'icon-position': {
                validator: function (value) {
                    let init = ['left', 'right']
                    return init.includes(value)
                },
                default: 'left'
            }
        },
        methods: {
            focus: function () {
                this.$refs.but.focus()
            }
        }
    }

</script>

<style>


</style>
